<template>
    <div v-if="tkIsShow">
        <div class="zhezhao"></div>
        <div class="tankuang">
            <div class="tk_title">{{ title }}</div>
            <img src="../assets/icon-close.png" class="tk_close" @click="closeTk">
            <div class="tk_content">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="图片" v-if="form.skuPic!=''">
                        <template>
                            <el-image
                                style="width: 70px; height: 70px"
                                :src="form.skuPic"
                                fit="fill">
                            </el-image>
                        </template>
                    </el-form-item>
                    <el-form-item label="上传">
                        <template>
                            <el-upload
                            class="upload-demo"
                            :action="UPLOAD_URL"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            :show-file-list="false"
                            :limit="1">
                            <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </template>
                    </el-form-item>
                    <el-form-item label="成本价" prop="costPrice">
                        <el-input type="number" v-model="form.costPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="划线价" prop="underlinedPrice">
                        <el-input type="number" v-model="form.underlinedPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="销售价" prop="salesPrice">
                        <el-input type="number" v-model="form.salesPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="是否有效" prop="enable">
                        <el-radio-group v-model="form.enable">
                            <el-radio :label="1">有效</el-radio>
                            <el-radio :label="0">无效</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="库存" prop="stock">
                        <el-input type="number" v-model="form.stock"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { UPLOAD_URL } from '@/utils/http.js';
export default {
  data() {
    return {
        UPLOAD_URL,
        tkIsShow:false,
        title:"",
        str:'',
        form:{},
        rules: {
            level: [
                {required: true,message: "请输入排序",trigger: ["blur,change"]}
            ],
            costPrice: [
                {required: true,message: "请输入成本价",trigger: ["blur,change"]}
            ],
            underlinedPrice: [
                {required: true,message: "请输入划线价",trigger: ["blur,change"]}
            ],
            salesPrice: [
                {required: true,message: "请输入销售价",trigger: ["blur,change"]}
            ],
            enable: [
                {required: true,message: "请选择是否有效",trigger: ["blur,change"]}
            ],
            stock: [
                {required: true,message: "请输入库存",trigger: ["blur,change"]}
            ]
        },
        fileList:[],
        upnum:1,
    };
  },
  methods: {
    __init(str, id) {
        this.str=str;
        if (str == "batch") {
            this.form={
                ids:id,
                skuPic:'',
                salesPrice:0,
                underlinedPrice:0,
                costPrice:0,
                stock:'',
                enable:1
            }
        }else{
            this.upnum=1;
            var url="manager/getGoodsSkuDescById";
            var params={
                id: id
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    this.form={
                        ids:res.data.skuId,
                        skuPic:res.data.skuPic,
                        salesPrice:res.data.salesPrice,
                        underlinedPrice:res.data.underlinedPrice,
                        costPrice:res.data.costPrice,
                        enable:res.data.enable,
                        stock:res.data.stock
                    }
                } else {
                    this.$message.error(res.msg)
                }
            });
        }
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var url="manager/editGoodsSku";
            var params={
                ...this.form
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    this.$message.success(res.msg)
                    this.closeTk();
                } else {
                    this.$message.error(res.msg)
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    closeTk(){
        this.tkIsShow = false;
        this.$emit("close");
    },
    handleSuccess(response, file, fileList) {
        console.log(response);
        if(response.code==0){
            this.$message.success('上传成功');
            this.form.skuPic=response.data;
        }
    }
  }
}
</script>
<style scoped lang="scss">
  .zhezhao{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: 200;
  }
  .tankuang{
    position: fixed;
    width: 30%;
    background-color: #fff;
    top: 15%;
    left: 35%;
    z-index: 201;
    border-radius: 5px;
  }
  .tk_title{
    font-size: 17px;
    margin: 15px 0;
  }
  .tk_content{
    width: 80%;
    margin-left: 10%;
  }
  .tk_close{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    right: 20px;
  }
</style>